<template>
  <el-form label-position="left"
           ref="form"
           :model="user"
           :rules="rules"
           label-width="80px">
    <el-form-item label="用户名：" prop="username" v-on:blur='show'>
      <el-input v-model="user.username"></el-input>
    </el-form-item>

    <el-form-item label="密码：" prop="password">
      <el-input v-model="user.password"></el-input>
    </el-form-item>

    <el-form-item label="验证码：" prop="code">
      <el-input v-model="user.code"></el-input>
      <img v-show="isshow" :src="imagesrc" v-on:click="getimage" alt="验证码" width="150px">
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="reg">提交</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
    export default {
        name: "reg",
      data:function () {
          var pwd = (rule,value,callback) =>{
            console.log(value);
            if (value == null || value=="")
            {
              callback(new Error("输入不合法"))
            }
          };
          return {
            user:{
              // "username":"",
              // "password":"",
              // "code":''
              username:'',
              password:'',
              code:'',
              },
            imagesrc:'',
            isshow:true,
              rules:{
                username:[
                  { required:true,message:"请输入用户名",trigger:'blur'},
                  { min:3,max:5,message: "长度在 3 到 5 个字符",trigger: "blur"}
                ],
                password:[
                  { validator:pwd,trigger:'blur' }

                ],
                code:[
                  { required: true, message: '请输入验证码',trigger:'blur' }
                ]

              }

          }

      },
      methods:{
          reg(){
            console.log(this.user);
            this.$refs["form"].validate((valid) =>{
              if (valid){
                alert('submit');
              }else {
                console.log("error submit")
                alert('请重新输入')
                return false
              }
            });

            console.log('验证成功')
              this.axios({
                url:'http://127.0.0.1:8000/reg/',
                method:'post',
                data:{
                  'username':this.user.username,
                  'password':this.user.password
                }
              }).then(res=>{
                  if (res.data.code==200){
                    alert('注册成功');
                    this.$router.push({'name':'login'})
                  }else if (res.data.code==500){
                    alert('验证码错误')
                  }else {
                    alert(res.data.data);
                    return false;
                  }
                })

          },
          show(){
            this.isshow = true;
            this.imagesrc = 'http://127.0.0.1:8000/image/?username='+ 'asdfg'
          },
          getimage(){
            var code = Math.random();
            this.imagesrc = "http://127.0.0.1:8000/image/?username=" + this.user.username + "&" + code;
          }

      }

    }
</script>

<style scoped>
  .el-form{
    width: 300px;
  }

</style>
